<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>LayUI</title>
<script src="../../../s/jquery/1.11.1/jquery.js"></script>
<script src="../../../s/layui/2.1.6/layui.all.js"></script>
<script src="../../../s/vue/2.7.16/vue.min.js"></script>
<style type="text/css">
.x-wdate {
	border: #c3c5cd 1px solid;cursor:pointer;
	background: #fff no-repeat right
		url("");
}
</style>
</head>
<body>

	<div id="el">
		<input is="laydate" class="x-wdate" type="text" value="" />
	</div>

	<script>
		Vue.component('laydate', {
			props : [ 'value' ],
			template : '<input type="text" value="" />',
			mounted : function() {
				var vm = this;
				$(vm.$el).val(this.value || '');
				layui.laydate.render({
					elem : vm.$el,
					done : function(value) {
						vm.$emit('input', value)
					}
				});
			},
			watch : {
				value : function(value) {
					// update value
					$(this.$el).val(value).trigger('change')
				}
			},
			destroyed : function() {
			}
		});
		var vm = new Vue({
			el : '#el',
			data : {}
		});
	</script>
</body>
</html>